import React from 'react';
import { Layout, Menu, Icon } from 'antd';
import Footer from '../components/layout/footer';
import Header from '../components/layout/header';
import Siders from '../components/layout/sider';
import styles from '../components/layout/common.css';

const SubMenu = Menu.SubMenu;

const {Sider, Content } = Layout;

class SiderDemo extends React.Component {
    

  state = {
    collapsed: false,
  };
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  render() {
    const {children, location, dispatch} = this.props;
    return (
      <Layout className={styles.layoutContent} >
       
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}   >
          <Siders state={this.state}  location={location}/>
        </Sider>
        <Layout  >
          <Header state={this.state} toggle={this.toggle}/>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 480 }} >{children}</Content>
          <Footer  />
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo;
